<template>
	<div class="category">
		<van-divider 
			dashed
			:style="{ color: color, borderColor: color, padding: '0 16px' }"
		>
		  {{title}}
		</van-divider>
		<div class="category-list">
			<div 
				class="category-item" 
				:style="{ color: color, borderColor: color}"
				v-for="(item,index) in data"
				@click="updateCategory(index)"
			>
				{{item.title}}
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			// 数据
			data: {
				type: Array,
				default() {
					return []
				}
			},
			// 标题
			title: {
				type: String,
				default: '标题'
			},
			// 颜色
			color: {
				type: String,
				default: '#1989fa'
			}
		},
		methods: {
			// 更新栏目
			updateCategory(index) {
				this.$emit('remove',index)
				this.$emit('add',index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.category{
		padding: 0 12px;
		.category-list{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.category-item{
				width: 23%;
				height: 40px;
				line-height: 40px;
				text-align: center;
				box-sizing: border-box;
				font-size: 14px;
				border-style: solid;
				border-width: 1px;
				margin-right: 9px;
				margin-bottom: 10px;
				&:nth-child(4n){
					margin-right: 0;
				}
			}
		}
	}
</style>